<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <script src="../assets/flexible/flexible.debug.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全部分类</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/classify.css">
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
</head>

<body>
    <header class="header">
        <div class="iconfont left index">&#xe607;返回</div>
        <div class="center">全部产品分类</div>
        <div class="right"></div>
    </header>
    <div class="search">
        <div class="box">
            <div class="input">
                <input type="text" placeholder="搜索你想要的产品">
            </div>
            <div class="button">
                <div class="iconfont i">&#xe657;</div>
            </div>
        </div>
    </div>
    <div class="main">
        <script type="text/html" id="template">
            {{each str v i}}
            <div class="item">
                <h3>{{v.title}}</h3>
                <div class="dl">

                    {{each v.content a}}
                    <dl class="delt">
                        <dt><img src="{{a.img}}"></dt>
                        <dd>{{a.imgtitle}}</dd>
                    </dl>
                    {{/each}}

                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <footer class="footer">
        <dl class="list" id="index">
            <dt class="iconfont">&#xe67f;</dt>
            <dd>首页</dd>
        </dl>
        <dl class="list on">
            <dt class="iconfont">&#xe612;</dt>
            <dd>分类</dd>
        </dl>
        <dl class="list cart">
            <dt class="iconfont">&#xe501;</dt>
            <dd>购物车</dd>
        </dl>
        <dl class="list cart">
            <dt class="iconfont">&#xe60b;</dt>
            <dd>我的</dd>
        </dl>
    </footer>

    <script src="../assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../assets/swiper/js/swiper.min.js"></script>
    <script src="../assets/artTemplate/template-web.js"></script>
    <script>
        $(function () {
            $('.list').click(function () {
                $(this).addClass('on').siblings().removeClass('on');
            });

            $('#index').click(function () {
                location.href = "../index.html"
            })

            $('.cart').click(function () {
                location.href = "../html/cart.html"
            })
            $('.delt').click(function () {
                location.href = "../html/commodities.html"
            })

            $('.index').click(function () {
                history.back();
            })
        })
        jQuery(function ($) {
            $.ajax({
                type: "GET",
                url: "../json/classify.json",
                dataType: 'json',
                success: function (data) {
                    var arr = template('template', {
                        str: data
                    });
                    $('.main').html(arr);
                }
            })
        })
    </script>
</body>

</html>